<template>
  <div class="boxsty zhiBiao">
    <div v-if="tianBaoTable.lastPage == 'jgtb'">
      <div :height="searchheight" v-if="showSearch">
        <span
          style="float: right; margin-top: -30px; cursor: pointer"
          @click="searchchangeadvanced"
          >{{ searchadvanced ? "收起" : "展开" }}
          <i
            :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          />
        </span>
        <div v-show="searchadvanced">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="getDataList()"
            class="form-inline"
            v-if="showSearch"
          >
            <el-form-item label="">
              <el-checkbox-group v-model="dataForm.check">
                <el-checkbox
                  v-for="item in checkList"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="table-header-btn-box" style="text-align: right">
      <el-button
        plain
        type="primary"
        @click="saveZhibiaoData"
        v-if="tianBaoTable.lastPage == 'jgtb'"
        >保存</el-button
      >
      <el-button
        plain
        type="primary"
        @click="okAll"
        :disabled="tianBaoTable.lastPage == 'jghzsh'"
        v-if="tianBaoTable.lastPage !== 'jgtb'"
        >批量同意</el-button
      >
      <el-button plain type="primary" @click="fnBackOldPage">关闭</el-button>
    </div>
    <div class="avue-crud">
      <el-table
        ref="zhibiaotable"
        style="width: 100%; margin-top: 20px"
        :data="dataList"
        border
        v-loading="dataListLoading"
      >
        <el-table-column label="选择" type="selection" width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="60"
          header-align="center"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          v-if="radio == '1'"
          prop="name"
          header-align="center"
          show-overflow-tooltip
          align="center"
          min-width="120"
          label="受约人姓名"
        >
          <template slot="header" slot-scope="scope">
            <span>受约人姓名</span
            ><span class="mg-l10">({{ dataList.length }}人)</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="radio == '2'"
          prop="name"
          header-align="center"
          align="center"
          min-width="100"
          label="机构名称"
        >
          <template slot="header" slot-scope="scope">
            <span>机构名称</span
            ><span class="mg-l10">({{ dataList.length }}个)</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in list"
          :key="index"
          align="center"
          :label="item.name"
        >
          <template slot="header" slot-scope="scope">
            <span>{{ item.name }}</span
            ><span class="mg-l10"
              >({{ dataList | filterNum(item, index) }}个)</span
            >
          </template>
          <el-table-column
            v-if="false"
            header-align="center"
            align="center"
            min-width="100"
            label="合同指标表id"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row['zbId' + (index + 1)]"
                placeholder="合同指标表id"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="目标值"
          >
            <template slot-scope="scope">
              <span>{{ scope.row["targetValue" + (index + 1)] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            min-width="100"
            align="center"
            label="单位"
          >
            <template slot-scope="scope">
              <span>{{ scope.row["unit" + (index + 1)] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showType == '1'"
            header-align="center"
            align="center"
            min-width="100"
            label="预填报值"
          >
            <template slot-scope="scope">
              <el-input
                v-if="
                  tianBaoTable.lastPage == 'jgtb' ||
                  tianBaoTable.lastPage == 'jghz'
                "
                :disabled="scope.row['faqiType' + (index + 1)] != 0"
                v-model="scope.row['ytbSz' + (index + 1)]"
                placeholder="预填报值"
                @change="
                  fnChangeMuB(
                    scope.row['ytbSz' + (index + 1)],
                    scope.row['tbSz' + (index + 1)],
                    0,
                    scope.row['zbId' + (index + 1)],
                    'zbId' + (index + 1),
                    'ytbSz' + (index + 1),
                    scope.row['targetValue' + (index + 1)],
                    scope.row['weight' + (index + 1)]
                  )
                "
              ></el-input>
              <span v-else>{{ scope.row["ytbSz" + (index + 1)] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showType == '1'"
            header-align="center"
            align="center"
            min-width="100"
            label="填报值"
          >
            <template slot-scope="scope">
              <el-input
                v-if="
                  tianBaoTable.lastPage == 'jgtb' ||
                  tianBaoTable.lastPage == 'jghz'
                "
                :disabled="scope.row['faqiType' + (index + 1)] != 1"
                v-model="scope.row['tbSz' + (index + 1)]"
                placeholder="填报值"
                @change="
                  fnChangeMuB(
                    scope.row['tbSz' + (index + 1)],
                    scope.row['tbSz' + (index + 1)],
                    1,
                    scope.row['zbId' + (index + 1)],
                    'zbId' + (index + 1),
                    'tbSz' + (index + 1),
                    scope.row['targetValue' + (index + 1)],
                    scope.row['weight' + (index + 1)]
                  )
                "
              ></el-input>
              <span v-else>{{ scope.row["tbSz" + (index + 1)] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <sortingPerChooseDialog
      :sortingPerChooseDialogData="sortingPerChooseDialogData"
      @sortingPerChooseDialogChild="sortingPerChooseDialogChild"
    ></sortingPerChooseDialog>
  </div>
</template>

<script>
import {
  delObj,
  updateBatchZhiBiaoState,
} from "@/api/hetongrenwu/hetonghtxxdjb";
import { mapGetters } from "vuex";
import { putObj } from "@/api/hetongrenwu/hetongzhibiaohz";
import sortingPerChooseDialog from "@/views/hetongrenwu/components/sortingPerChooseDialog.vue";
import {
  getZhibiaoCheckndDataforjg,
  getZhibiaoCheckndData,
  getZhibiaoCheckdDataJghz,
  getZhibiaoData,
  getZhibiaoDatafortb,
  saveZhibiaoData,
} from "@/api/hetongrenwu/hetongyeji/hetongzb";

export default {
  props: {
    tianBaoTable: {},
    ids: [],
    dataListHT: [],
    hetongzhibiaoTable: {},
    showType: "",
    radio: "",
    ndids: [],
  },
  components: {
    sortingPerChooseDialog,
  },
  data() {
    return {
      editFlag: true,
      pageTitle: "业绩合同",
      dataForm: {
        check: [],
      },
      dataList: [],
      sortingPerChooseDialogData: {},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radioTwo: "1",
      zhiShow: "1",
      zhibiaoForm: {},
      lastPage: "",
      showSearch: true,
      checkList: [],
      searchadvanced: true,
      searchheight: "0",
      list: [],
      ndIds: [],
      flag: "",
      idArray: "",
    };
  },
  watch: {
    "dataForm.check"(newValue) {
      //console.log(newValue);
      if (newValue.length > 0) {
        //交集
        this.idArray = "";
        newValue.forEach((ele, index) => {
          //console.log(ele);
          this.idArray = this.idArray + ele + ",";
        });
        //console.log(this.idArray);
        this.list = this.checkList.filter((x) => {
          return newValue.some((y) => {
            return x.id == y;
          });
        });
        this.getDataList();
      }
      if (newValue.length == 0) {
        this.list = [];
        this.dataList = [];
      }
    },
  },
  filters: {
    filterNum(dataList, listItem, index) {
      var num = 0;
      var arr = dataList.filter((item) => {
        return item["zbId" + (index + 1)];
      });
      num = arr.length;
      return num;
    },
  },
  created() {
    var param = {
      ids: this.ids,
    };
    var params2 = {
      ids: this.ids,
      ndids: this.ndids,
    };
    // console.log(this.tianBaoTable.lastPage)
    if (
      this.tianBaoTable.lastPage == "jghz" ||
      this.tianBaoTable.lastPage == "jghzsh"
      // this.tianBaoTable.lastPage == "tbsh"
    ) {
      this.getZhibiaoCheckdDataJghz(params2);
    } else if (
      this.tianBaoTable.lastPage == "jgtb" ||
      this.tianBaoTable.lastPage == "tbsh"
    ) {
      var params_jgtb = {
        ids: this.ids,
        ndIds: this.ndids,
      };
      this.getZhibiaoCheckdData(params_jgtb);
    } else {
      this.getZhibiaoCheckdData(param);
    }
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    //批量同意
    okAll() {
      var select = this.$refs.zhibiaotable.selection;
      if (this.tianBaoTable.lastPage == "jghz") {
        this.$confirm("是否会签审批?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
          .then(function () {
            this.flags = "是";
            this.sortingPerChooseDialogData = {
              visible: true,
              rows: [],
              types: "jghzNd",
            };
          })
          .catch(() => {
            this.flags = "否";
            this.sortingPerChooseDialogData = {
              visible: true,
              rows: [],
              types: "jghzNd",
            };
          });
      } else {
        var ndIds = "";
        // console.log(this.ndids)
        this.ndids.forEach((ele) => {
          ndIds = ndIds + ele + ",";
        });
        var params2 = {
          rows: this.dataList,
          type: this.tianBaoTable.lastPage,
          taskIds: this.tianBaoTable.taskIds,
          ndIds: ndIds,
        };
        // console.log(params2)
        updateBatchZhiBiaoState(params2).then((res) => {
          this.$message.closeAll();
          this.$message.success("提交成功");
          this.fnBackOldPage();
        });
      }
    },
    sortingPerChooseDialogChild(data) {
      var params = {
        type: this.tianBaoTable.lastPage,
        proceids: this.tianBaoTable.proceids,
        flag: this.flags,
        perids: data,
        htids: this.tianBaoTable.htids,
      };
      updateBatchZhiBiaoState(params).then((res) => {
        this.$message.closeAll();
        this.$message.success("提交成功");
        this.fnBackOldPage();
      });
    },
    editLock() {
      this.editFlag = false;
    },
    saveZhibiaoData() {
      saveZhibiaoData(this.dataList).then((response) => {
        this.$message.closeAll();
        this.$message.success("保存成功");
        this.fnBackOldPage();
      });
    },
    getZhibiaoCheckdData(ids) {
      if (
        this.tianBaoTable.lastPage == "jgtb" ||
        this.tianBaoTable.lastPage == "tbsh"
      ) {
        getZhibiaoCheckndDataforjg(ids).then((response) => {
          this.checkList = response.data.data;
          var arr = response.data.data;
          this.list = [];
          arr.forEach((item) => {
            var obj = this.list.find((listItem) => listItem.id == item.id);
            if (!obj) {
              this.list.push(item);
            }
          });
          new Promise((resolve, reject) => {
            response.data.data.forEach((ele) => {
              //console.log(ele)
              this.idArray = this.idArray + ele.id + ",";
            });
            resolve(this.getDataList());
          });
        });
      } else {
        getZhibiaoCheckndData(ids).then((response) => {
          this.checkList = response.data.data;
          var arr = response.data.data;
          this.list = [];
          arr.forEach((item) => {
            var obj = this.list.find((listItem) => listItem.id == item.id);
            if (!obj) {
              this.list.push(item);
            }
          });
          new Promise((resolve, reject) => {
            response.data.data.forEach((ele) => {
              //console.log(ele)
              this.idArray = this.idArray + ele.id + ",";
            });
            resolve(this.getDataList());
          });
        });
      }
    },
    getZhibiaoCheckdDataJghz(ids) {
      getZhibiaoCheckdDataJghz(ids).then((response) => {
        this.checkList = response.data.data;
        this.list = response.data.data;
        new Promise((resolve, reject) => {
          response.data.data.forEach((ele) => {
            this.idArray = this.idArray + ele.id + ",";
          });
          resolve(this.getDataList());
        });
      });
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 获取数据列表
    getDataList() {
      var params = {
        zhibiaoId: this.idArray,
        str: 2,
        ids: this.ids,
        typestr: this.tianBaoTable.lastPage,
      };
      var params2 = {
        zhibiaoId: this.idArray,
        str: 2,
        ids: this.ids,
        typestr: this.tianBaoTable.lastPage,
        ndIds: this.tianBaoTable.ndids,
      };
      if (this.tianBaoTable.lastPage == "tbfq") {
        getZhibiaoData(params).then((response) => {
          this.dataList = response.data.data;
        });
      } else if (this.tianBaoTable.lastPage == "tbsh"||this.tianBaoTable.lastPage == "jgtb") {
        getZhibiaoDatafortb(params2).then((response) => {
          this.dataList = response.data.data;
        })
      } else {
        getZhibiaoData(params2).then((response) => {
          this.dataList = response.data.data;
        });
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    //子集信息
    zhibiaoChild(zhibiaoChild) {
      if (zhibiaoChild) {
        this.zhiShow = 1;
      }
    },
    //新增子集返回的数据(关闭修改页面，打开指标库维护)
    openZhibiao(data) {
      this.addOrUpdateVisible = false;
      this.zhiShow = 2;
      this.zhibiaoForm = {
        enter: 0,
        disabled: false,
      };
    },
    //返回原来的页面
    fnBackOldPage() {
      this.$emit("fnBackOldPage", "返回原页面");
      this.$emit("zhibiaoChild", "返回合同查看");
    },
    //复选框选中数据时批量更改目标值
    fnChangeMuB(val, val2, prop, isEdit, isEditb, propb, tvalue, weights) {
      // if (prop == 0) {
      //   putObj({
      //     id: isEdit,
      //     ytbSz: val,
      //   }).then((res) => {
      //     this.$message.closeAll();
      //     this.$message.success("保存成功");
      //   });
      // } else {
      //   putObj({
      //     id: isEdit,
      //     tbSz: val,
      //   }).then((res) => {
      //     this.$message.closeAll();
      //     this.$message.success("保存成功");
      //   });
      // }
      console.log("dfdf");
      var params = {
        id: isEdit,
        ytbSz: val,
        tbSz: val2,
        targetValue: tvalue,
        weight: weights,
      };

      var selectedData = this.$refs.zhibiaotable.selection;
      console.log(JSON.stringify(selectedData) + "==------selectdata");
      if (selectedData.length > 0) {
        selectedData.forEach((item) => {
          if (item[isEditb]) {
            item[propb] = val;
            console.log(
              isEditb + "==------isEditb" + item[propb] + "-1--" + val
            );
          }
        });
      }
      saveZhibiaoData(this.dataList).then((response) => {
        putObj(params).then((res) => {
          this.$message.closeAll();
          this.$message.success("保存成功！");
        });
      });
    },
  },
};
</script>
